<template>
  <van-dialog
    :show="show"
    title=" "
    destroyOnClose
    className="custom-dialog full-action-sheet-teleport"
    :showConfirmButton="false"
    :showCancelButton="true"
    @cancel="beforeClose"
  >
    <div class="pendingRewardsMax">
      <div class="pendingRewards_title">
        <div class="l_box">
          {{ lang.ver_dialog_waiting_redeem }}
          <span>{{ userStore.moneyUnit }} 0,00</span>
        </div>
        <div class="r_box">
          <div class="img_box">
            <div class="btn" @click="goToPreviousMonth">
              <NuxtImg src="/images/layout/icon-jtLeft.png" alt="" />
            </div>
            <div class="year_txt">{{ currentYear }}</div>
            <div class="btn" @click="goToNextMonth">
              <NuxtImg
                class="img_2"
                src="/images/layout/icon-jtLeft.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div class="pendingRewards" ref="pendingRewardsRef">
        <ul class="pendingRewards_ul">
          <li
            v-for="(day, index) in calendarDays"
            :key="index"
            :class="{
              pendingRewards_ul_li_no_data: true,
              pendingRewards_ul_li_no_data_border: day.isToday,
            }"
          >
            <div class="pendingRewards_ul_li_no_data">
              <div class="date">
                <div class="title_date">
                  {{ day.isToday ? lang.ver_dialog_today : day.date }}
                </div>
                <div class="txt">
                  <span>{{ userStore.moneyUnit }} 0.00</span>
                </div>
              </div>
              <div class="no_data">
                <p>{{ lang.ver_dialog_no_reward }}</p>
                <p>{{ lang.ver_dialog_no_reward_desc }}</p>
              </div>
              <div></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/vip");
const userStore = useUserStore();

const props = defineProps(["show"]);
const emits = defineEmits(["changeVerShow"]);

// 当前显示的年份和月份
const currentYear = ref(new Date().getFullYear());
const currentMonth = ref(new Date().getMonth() + 1); // 1-12

// 容器引用
const pendingRewardsRef = ref<HTMLElement>();

// 生成日历天数数据
const calendarDays = computed(() => {
  const days = [];
  const today = new Date();

  // 获取当前显示月份的天数
  const daysInMonth = new Date(
    currentYear.value,
    currentMonth.value,
    0
  ).getDate();

  // 生成当月所有天数的数据
  for (let i = 1; i <= daysInMonth; i++) {
    const isToday =
      i === today.getDate() &&
      currentMonth.value === today.getMonth() + 1 &&
      currentYear.value === today.getFullYear();

    let dateText = "";
    if (isToday) {
      dateText = lang.ver_dialog_today;
    } else {
      dateText = `${i} ${getMonthAbbreviation(currentMonth.value)}`;
    }

    days.push({
      date: dateText,
      isToday,
      amount: "0.00",
      dayNumber: i,
    });
  }

  return days;
});

// 获取月份缩写
const getMonthAbbreviation = (month: number) => {
  const months = [
    "jan.",
    "fev.",
    "mar.",
    "abr.",
    "mai.",
    "jun.",
    "jul.",
    "ago.",
    "set.",
    "out.",
    "nov.",
    "dez.",
  ];
  return months[month - 1] || "";
};

// 重置到当前年月
const resetToCurrentDate = () => {
  const now = new Date();
  currentYear.value = now.getFullYear();
  currentMonth.value = now.getMonth() + 1;
};

// 滚动到当前天数位置
const scrollToCurrentDay = () => {
  if (!pendingRewardsRef.value) return;

  const today = new Date();
  const currentDay = today.getDate();

  // 计算当前天数在网格中的位置
  const gridColumns = 2; // 每行2列
  const rowIndex = Math.floor((currentDay - 1) / gridColumns);

  // 计算每个日历项的高度（包括间距）
  const itemHeight = 4.5; // 4.5rem
  const rowGap = 0.4; // 0.4rem
  const totalItemHeight = itemHeight + rowGap;

  // 平滑滚动到目标位置
  pendingRewardsRef.value.scrollTo({
    top: getPxFromRem(rowIndex * totalItemHeight),
    behavior: "smooth",
  });
};

// 监听show变化
watch(
  () => props.show,
  async (newShow) => {
    if (!newShow) return;
    // 当对话框显示时，重置到当前年月并滚动到当前天数
    resetToCurrentDate();
    await nextTick();
    scrollToCurrentDay();
  }
);

// 前往上个月
const goToPreviousMonth = () => {
  if (currentMonth.value === 1) {
    // 如果是1月，则回到上一年的12月
    currentMonth.value = 12;
    currentYear.value--;
  } else {
    currentMonth.value--;
  }
};

// 前往下个月
const goToNextMonth = () => {
  if (currentMonth.value === 12) {
    // 如果是12月，则前往下一年的1月
    currentMonth.value = 1;
    currentYear.value++;
  } else {
    currentMonth.value++;
  }
};

const beforeClose = () => {
  emits("changeVerShow", false);
};
</script>

<style scoped lang="scss">
.pendingRewardsMax {
  background-color: var(--mask-color);
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;

  .pendingRewards_title {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin-top: 0.3rem;
    padding-bottom: 0.3rem;

    .l_box {
      font-size: 0.38rem;
      font-weight: 600;
      color: var(--theme-neutral1);
      display: flex;
      align-items: center;

      span {
        font-size: 0.54rem;
        font-weight: 600;
        color: var(--theme-dec4);
        margin-left: 0.1rem;
      }
    }

    .r_box {
      margin-top: 0.2rem;
      display: flex;
      align-items: center;

      .img_box {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;

        .btn {
          background: var(--theme-color3);
          width: 0.8rem;
          height: 0.8rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0.15rem;
          cursor: pointer;
          transition: background-color 0.2s ease;

          &:hover {
            background: var(--theme-color2);
          }

          &:active {
            transform: scale(0.95);
          }

          img {
            width: 0.37rem;
            height: 0.37rem;
          }
        }

        .year_txt {
          font-size: var(--font-title2);
          color: var(--theme-neutral1);
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 2rem;
        }

        img.img_2 {
          transform: rotate(-180deg);
          margin-left: 0.08rem;
        }
      }
    }
  }

  .pendingRewards {
    padding: 0.3rem;
    border-radius: 0.2rem;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    /* iOS Safari 滚动优化 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    .pendingRewards_ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 0.32rem;
      row-gap: 0.4rem;
      color: var(--theme-neutral1);

      .pendingRewards_ul_li_no_data {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 4.5rem;
        box-sizing: border-box;
        background: var(--theme-color3);
        border-radius: 0.2rem;
        padding: 0.44rem 0.2rem 0.3rem; /* 统一使用rem单位：22px/50=0.44rem, 10px/50=0.2rem, 15px/50=0.3rem */
        border: 0.08rem solid transparent; /* 4px/50=0.08rem */
        /* iOS Safari 修复 */
        overflow: hidden;
        -webkit-overflow-scrolling: touch;

        &.pendingRewards_ul_li_no_data_border {
          border-color: var(--theme-dec4);
        }

        .date {
          text-align: center;

          .title_date {
            margin-bottom: 0.5rem;
            font-size: 0.36rem;
            font-weight: 700;
            color: var(--theme-neutral1);
          }

          .txt {
            font-size: 0.54rem;
            font-weight: 600;
            color: var(--theme-neutral1);

            span {
              color: var(--theme-dec4);
            }
          }
        }

        .no_data {
          text-align: center;
          font-size: 0.32rem;
          color: var(--theme-neutral2);
          line-height: 0.34rem;
        }
      }
    }
  }
}
</style>
